<template>
  <main>
    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
      <div>{{item.content}}</div>
      </el-tab-pane>
    </el-tabs>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </main>
</template>

<script>
export default {
  name: "tabs",
  computed: {
    /* 当前激活的标签页 */
    editableTabsValue: {
      get() {
        return this.$store.state.editableTabsValue;
      },
      set(newVal) {
        this.$store.state.editableTabsValue = newVal;
      }
    },
    /* 标签数据 */
    editableTabs() {
      return this.$store.state.editableTabs;
    }
  },
  methods: {
    /* 移除标签页 */
    removeTab(targetName) {
      this.$store.commit("REMOVETAB", targetName);
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom-color: #e9eef3;
}
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item:first-child span {
  display: none;
}
</style>